<template>
	<!-- 我的收藏 -->
	<div id="collect" class="collect">
		<div class="collectCont">
			<div class="collectCont_cluster">
				<div class="collect_cluster_Left">
					<div class="floorTitle">
						<span>我的收藏</span>
						<i class="iconfont icon-xiegang"></i>
						<span></span>
					</div>
					<div class="collect_cluster_Left_cont">
						<ul>
							<li :class="{collect:collect===1}" @click="collect = 1">
								<a @click="getTableDataA()">学术论文</a>
							</li>
							<li :class="{collect:collect===2}" @click="collect = 2">
								<a @click="getTableDataB()">学术视频</a>
							</li>
						</ul>
					</div>
					<div class="collect_cluster_Left_contB">
						<ul v-show="collect == 1">
							<li v-for="(item,index) in collecttData" :key="index">
								<p>
									<a href="#">{{item.Title}}</a>
								</p>
								<p>
									<span>{{item.Issue}}</span>
								</p>
								<p>{{item.AddDate}}</p>
								<div style="clear:both;"></div>
								<p style="width:100%;height:20px;">
									<i class="iconfont icon-picture-delet" style="float:right;font-size:21px;"
										@click="acadeCancle('paper',item.OpenId)"></i>
								</p>
							</li>
							<!--       <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangeB"
                :current-page="currentPageB"
                :page-sizes="[10,15,20,25,30]"
                :page-size="10"
                :total="totalB"
              ></el-pagination> -->
							<el-pagination @size-change="handleSizeChange" @change="handleCurrentChangeB"
								:currentPage="currentPageB" :pageSize="page.pageSize" :page-size="5" :total="totalB"
								:showPageSize='page.pageSize'></el-pagination>
						</ul>

						<ul v-show="collect == 2">
							<li v-for="(item,index) in collecttDataB" :key="index">
								<p>
									<a href="#">{{item.Title}}</a>
								</p>
								<p>
									<span>{{item.Issue}}</span>
								</p>
								<p>{{item.AddDate}}</p>
								<div style="clear:both;"></div>
								<p style="width:100%;height:20px;">
									<i class="iconfont icon-picture-delet" style="float:right;font-size:21px;"></i>
								</p>
							</li>
						</ul>

						<!-- <ul v-show="collect == 3">
              <li v-for="(item,index) in collecttDataC" :key="index">
                <p><a href="#">{{item.title}}</a></p>
                <p>
                  <span>{{item.periodical}} | {{item.issue}}</span>
                </p>
                <p>{{item.colleCreate}}</p>
                <p style="width:100%;height:20px;">
                  <i class="iconfont icon-picture-delet" style="float:right;font-size:21px;"></i>
                </p>
              </li>
            </ul>-->
					</div>
				</div>
			</div>
		</div>

		

	</div>
</template>

<script>
	// import router from "@/router/index";
	//juqery
	import elPagination from '@/components/page-pagination/components/page-pagination/page-pagination'
	export default {
		name: "collect",
		components: {
			elPagination
		},
		data() {
			return {
				collect: 1,
				collecttData: [],
				collecttDataB: [],
				collecttDataC: [],
				currentPageB: 1,
				totalB: 0,
				page: {
					currentPage: 1,
					pageSize: 10,
					total: 0
				}
			};
		},
		methods: {
			getInfo() {
				this.currentPage = 1;
				this.getTableDataA();
			},
			// 论文收藏
			getTableDataA() {
				// 加密完成
				this.$httphelper
					.post("/api/LmDownLoadApi/GetCollectRecordPage", {
						Sign: "string",
						Type: "paper",
						AuthorId: this.$localStorage.getItem("AuthorId"),
						Page: this.page.currentPage,
						Limit: this.page.pageSize
					})
					.then(res => {
						this.collecttData = res.data.data;
						this.page.total = res.data.totalcount;
						this.collecttData.forEach(item => {
							item.AddDate = item.AddDate.substr(0, 10);
							item.Issue = item.Year + "," + item.Volume + "(" + item.Issue + ")";
						});
					})
					.catch(err => {
						console.log("请求失败：" + "err");
					});
			},
			// 视频收藏
			getTableDataB() {
				// 加密完成
				this.$httphelper
					.post("/api/LmDownLoadApi/GetCollectRecordPage", {
						Sign: "string",
						Type: "video",
						AuthorId: this.$localStorage.getItem("AuthorId"),
						Page: this.page.currentPage,
						Limit: this.page.pageSize
					})
					.then(res => {
						this.collecttDataB = res.data.data;
						this.page.total = res.data.totalcount;
						this.collecttDataB.forEach(item => {
							item.AddDate = item.AddDate.substr(0, 10);
							item.Issue = item.Year + "," + item.Volume + "(" + item.Issue + ")";
						});
					})
					.catch(err => {
						console.log("请求失败：" + "err");
					});
			},
			handleCurrentChangeB(val) {
				this.page.currentPage = val;
				this.getTableDataA();
			},
			// 取消当前条收藏
			acadeCancle(type, id) {
				this.$httphelper
					.post("/api/LmDownLoadApi/DeleteCollectRecord", {
						Sign: "string",
						Type: type,
						PId: id,
						AuthorId: this.$localStorage.getItem("AuthorId")
					})
					.then(res => {
						if (res.data.data == true) {
							this.$message({
								type: "success",
								message: "取消收藏成功!"
							});
							if (type == "paper") {
								this.getTableDataA();
							} else if (type == "video") {
								this.getTableDataB();
							}
						} else {
							this.$message({
								type: "warning",
								message: "取消失败!"
							});
						}
					})
					.catch(err => {
						console.log("请求失败：" + "err");
					});
			}
		},
		created() {
			this.getInfo();
		}
	};
</script>

<style lang="less" scoped>
	@media screen and (min-width: 1010px) {
		#collect {
			display: none;
		}
	}

	@media screen and (max-width: 1010px) {
		#collect {
			/deep/.el-pagination {
				text-align: center;
				margin-top: 10px;
			}

			/deep/.el-pagination__total {
				display: none;
			}

			/deep/.el-pagination__sizes {
				display: none;
			}

			width: 100%;

			.collectCont {
				width: 100%;
				height: 100%;
				padding-top:10rpx;
				.collectCont_cluster {
					width: 94%;
					margin: 0 auto;

					.collect_cluster_Left {
						width: 100%;

						.floorTitle {
							height: 100%;
							border-bottom: 2px solid #eee;
							position: relative;

							span:nth-child(1) {
								display: inline-block;
								font-size: 36rpx;
								color: #000;
								width: 170rpx;
								height: 70rpx;
								border-bottom: 2px solid #003c80;
								font-family: "Adobe Heiti Std R";
								font-weight: normal;
								line-height: 60rpx;
							}

							span:nth-child(3) {
								color: #797979;
								font-size: 26rpx;
								font-family: "Adobe Heiti Std R";
							}
						}

						.collect_cluster_Left_cont {
							width: 100%;
							margin-top:30rpx;

							// overflow: hidden;
							// overflow-x: auto;
							ul {
								width: 100% !important;
								height: 64rpx;
								position: relative;

								.collect {
									background: #003c80 !important;

									a {
										color: #fff;
									}
								}

								li {
									width: 26% !important;
									list-style: none;
									float: left;
									height: 64rpx;
									line-height: 64rpx;
									text-align: center;
									margin-right: 46rpx;

									a {
										color: #000000;
										font-size: 28rpx;
									}
								}

								i {
									display: none;
								}
							}
						}

						.collect_cluster_Left_contB {
							width: 100%;
							height: 100%;
							margin-top: 30rpx;
							margin-bottom: 180rpx;

							ul {
								width: 100%;
								height: 100%;

								li {
									list-style: none;
									width: 100%;
									height: auto;
									// float: left;
									margin-right: 88rpx;
									cursor: pointer;
									padding: 26rpx;
									background: #fff;
									border-bottom: 1px solid #e6e6e6;

									p {
										margin-bottom: 14rpx;
										font-size: 28rpx;
									}

									p:nth-child(1) {
										width: 100%;
										overflow: hidden;
										text-overflow: ellipsis;
										-webkit-line-clamp: 1;
										line-clamp: 1;
										white-space: nowrap;

										a {
											font-size: 28rpx;
											color: #003c80;
										}
									}

									p:nth-child(2) {
										width: 50%;
										float: left;
										margin-top: 18rpx;
									}

									p:nth-child(3) {
										width: 30%;
										float: right;
										margin-top: 18rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
